<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加文章</title>
    <script src="/dist/wangEditor.js"></script>
    <style>
        /* 新增编辑器样式 */
        #editor-container {
            height: 400px;
            margin: 10px 0;
            border: 1px solid #ccc;
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        form {
            max-width: 600px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 5px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"],
        textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        input[type="file"] {
            margin-bottom: 15px;
        }

        button {
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        #logoutButton {
            margin-top: 20px;
            display: block;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }

        #type {
            width: 20%;
            height: 30px;
            margin: 5px 0;
        }

        /* 加载圈圈样式 */
        #loading {
            display: none;
            border: 16px solid #f3f3f3;
            border-top: 16px solid #3498db;
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
        }

        @keyframes spin {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }
    </style>
</head>

<body>
<form id="articleForm">
    <label for="type">文章类型:</label>
    <select id="type" name="type" required>
        <option value="">请选择类型</option>
        <option value="学校政策">学校政策</option>
        <option value="竞赛信息">竞赛信息</option>
        <option value="活动信息">活动信息</option>
    </select>

    <label for="theme">文章主题:</label>
    <input type="text" id="theme" name="theme" required>

    <label for="rule">文章规则:</label>
    <input type="text" id="rule" name="rule">

    <label for="date">日期:</label>
    <input type="text" id="date" name="date">

    <label for="location">地点:</label>
    <input type="text" id="location" name="location">

    <label for="signMethod">报名方式:</label>
    <input type="text" id="signMethod" name="signMethod">

    <label for="origin">来源:</label>
    <input type="text" id="origin" name="origin">

    <!-- 替换 textarea 为编辑器容器 -->
    <label for="editor-content">文章内容:</label>
    <div id="toolbar-container"></div>
    <div id="editor-container"></div>
    <input type="hidden" id="editor-content" name="content">

    <label for="image">选择图片:</label>
    <input type="file" id="image" name="image" accept="image/*" required>

    <button type="submit">提交文章</button>
</form>

<button id="logoutButton" onclick="window.location.href='/admin/home'">返回</button>

<!-- 加载圈圈元素 -->
<div id="loading"></div>
<script>
    // 创建编辑器实例
    const E = window.wangEditor;
    const editor = new E('#toolbar-container', '#editor-container');
    // 配置编辑器
    // 配置图片上传服务器地址
    editor.config.uploadImgServer = '/richtext/image/upload';
    // 配置表单中文件字段名
    editor.config.uploadFileName = 'image';
    // 启用编辑器内置压缩（自动处理大文件）
    editor.config.uploadImgShowBase64 = true; // 可选：小图转 Base64
    editor.config.uploadImgMaxSize = 5 * 1024 * 1024; // 限制为 5MB
    editor.config.uploadImgCompress = true; // 开启压缩
    // 配置最多可上传的文件数量
    editor.config.uploadImgMaxLength = 1;
    // 配置允许上传的文件类型
    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp'] // 确保包含 png
    // 创建并初始化编辑器
    editor.create();
    // 同步内容到隐藏域,设置 onchange 配置项
    editor.config.onchange = function (newHtml) {
        const contentInput = document.getElementById('editor-content');
        contentInput.value = newHtml;
    };

    // 提交表单
    document.getElementById('articleForm').addEventListener('submit', function (event) {
        event.preventDefault();
        // 强制同步最新内容
        const contentInput = document.getElementById('editor-content');
        contentInput.value = editor.txt.html();
        // 显示加载圈圈
        const loading = document.getElementById('loading');
        loading.style.display = 'block';
        const submitButton = this.querySelector('button[type="submit"]');
        submitButton.disabled = true;
        // 收集表单数据
        const formData = new FormData();
        const fields = ['type', 'theme', 'rule', 'date', 'location', 'signMethod', 'origin'];
        fields.forEach(field => {
            formData.append(`article.${field}`, document.getElementById(field).value);
        });
        // 关键修改：字段名改为 article.content
        formData.append('article.content', contentInput.value);
        const imageFile = document.getElementById('image').files[0];
        formData.append('image', imageFile);
        console.log('提交的数据:', Object.fromEntries(formData.entries()));
        // 发送请求
        fetch('/article', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    alert('文章添加成功！');
                    this.reset();
                    editor.txt.html('<p>请开始输入文章内容...</p>');
                } else {
                    alert('文章添加失败：' + data.message);
                }
            })
            .catch(error => alert('发生错误：' + error.message))
            .finally(() => {
                loading.style.display = 'none';
                submitButton.disabled = false;
            });
    });
</script>
</body>

</html>